<template>
  <el-tree
    ref="tree"
    icon-class="icon-tree iconfont"
    :data="treeData"
    :indent="16"
    :node-key="nodeKey"
    :highlight-current="highlightCurrent"
    :default-expand-all="showAll"
    :show-checkbox="showCheckbox"
    :props="defaultProps"
    :expand-on-click-node="false"
    :filter-node-method="filterNode"
    :lazy="lazy"
    :load="loadChildren"
    :accordion="accordion"
    @node-click="handleNodeClick"
    @check="handleCheckChange"
    @check-change="handleCheck"
  >
    <template #default="{ node, data }">
      <span class="custom-node" :class="{ 'color-primary': selectArr.indexOf(data.label) !== -1, 'color-cancel': data.isused }">
        <div class="flex-center color-main font12 flex-auto">
          <el-icon v-if="node.level === 1 && showFileIcon" class="mr5 font12">
            <svg-icon name="common-wenjianjia" />
          </el-icon>
          <el-icon v-else-if="node.level <= 3 && showFileIcon" class="mr5 font12">
            <svg-icon name="common-wenjian" />
          </el-icon>
          <span v-if="data.label" class="tree-name flex-center" :title="data.label" :class="{ 'color-cancel': data.state === 0 }">{{ data.label }}<slot name="hoverList" /></span>
          <span v-if="data.name" class="tree-name flex-center" :title="data.name" :class="{ 'color-cancel': data.state === 0 }">{{ data.name }} <slot name="hoverList" /></span>
          <span v-if="data.count" class="color-desc flex-auto flex-end">({{ data.count }})</span>
          <span v-if="data.questionCount" class="color-desc flex-auto flex-end">({{ data.questionCount }}题)</span>
        </div>
      </span>
    </template>
  </el-tree>
</template>

<script setup>
import { defineProps, ref, defineExpose, defineEmits, watch } from 'vue'

const props = defineProps({
  treeList: {
    type: Array,
    default() {
      return []
    }
  },
  nodeKey: {
    type: String,
    default: 'id'
  },
  filterText: {
    type: String,
    default: ''
  },
  defaultProps: {
    type: Object,
    default() {
      return {
        children: 'children',
        label: 'name',
        isLeaf: 'isLeaf'
      }
    }
  },
  showCheckbox: {
    type: Boolean,
    default: false
  },
  accordion: {
    type: Boolean,
    default: false
  },
  highlightCurrent: {
    type: Boolean,
    default: true
  },
  showRightMenu: {
    type: Boolean,
    default: false
  },
  showAll: {
    type: Boolean,
    default: true
  },
  rightMenuMap: {
    type: Object,
    default() {
      return {}
    }
  },
  loadChildren: {
    type: null
  },
  lazy: {
    type: Boolean,
    default: false
  },
  showFileIcon: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:selectType', 'selectSource', 'rightClick', 'checkChange'])

const selectArr = ref([])
const treeData = ref([])
const tree = ref(null)

watch(() => props.filterText, val => {
  tree.value.filter(val)
})

watch(() => props.treeList, val => {
  treeData.value = val
}, { deep: true })

function handleNodeClick(data) {
  if (props.highlightCurrent) {
    emit('update:selectType', data)
  }
}

function handleCheckChange(data) {
  emit('selectSource', tree.value.getCheckedNodes(true))
  tree.value.setCurrentKey(data.id)
}

function handleCheck(data, isCheck) {
  emit('checkChange', Object.assign(data, { isCheck }))
}

// function checkSelected (data, checked) {
//   // console.log(checked)
//   if (checked) {
//     selectArr.value.push(data.label)
//   } else {
//     const index = selectArr.value.indexOf(data.label)
//     if (index !== -1) {
//       selectArr.value.splice(index, 1)
//     }
//   }
//   if (data.children) {
//     data.children.forEach(item => {
//       checkSelected(item)
//     })
//   }
// }

function getCheckNodes(flag = true) {
  return tree.value.getCheckedNodes(flag)
}

function filterNode(value, data) {
  if (!value) return true
  return data.name.indexOf(value) !== -1
}

function setCheckNodes(nodes) {
  tree.value.setCheckedNodes(nodes)
}

function setCurrentKeyInTree(key) {
  tree.value.setCurrentKey(key)
}

function getTreeRef() {
  return tree.value
}

defineExpose({
  getCheckNodes,
  setCheckNodes,
  setCurrentKeyInTree,
  getTreeRef
})
</script>

<style scoped lang="scss">
.el-tree {
  background: none !important;
  &::v-deep(.el-tree-node__content) {
    height: 32px;
    margin-bottom: 4px;
  }
  &::v-deep(.icon-tree) {
    font-size: 12px;
    &::after {
      content: "\e67c";
    }
  }
  &.el-tree--highlight-current::v-deep(.el-tree-node.is-current) {
    & > .el-tree-node__content {
      color: var(--color-primary);
      border-radius: 4px;
    }
  }
  &::v-deep(.el-checkbox) {
    position: absolute;
    right: 0;
  }
  & > .el-tree-node {
    & > .el-tree-node__content > .custom-node {
      font-size: 12px;
      color: #333;
    }
  }
  .custom-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-right: 30px;
    font-size: 12px;
    color: #666;
    &::v-deep(.custom-hover-list) {
      display: none;
    }
    &:hover {
      &::v-deep(.custom-hover-list) {
        display: block;
      }
    }
    .tree-name {
      flex: 1;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 1px;
    }
  }
}
</style>
